<template>
  <div class="app-container">
    <input id="bug" type="button" value="打开调试" @click="show_debug">
    <div class="debug">
      <router-link to="/login" tag="button" replace>登录界面</router-link>
      <router-link :to='"/bookinfo/"+this.myid' tag="button" replace>任选书籍</router-link>
<!--      <router-link :to="{path:'/shopcar',query:{num1:'123',num2:'234'},}" tag="button" replace>购物车</router-link>-->
      <router-link to='/shopcar' tag="button" replace>购物车</router-link>
      <router-link to="/admin" tag="button">管理员界面</router-link>
      <router-link to="/rank" tag="button">排序界面</router-link>

    </div>
    <router-view></router-view>

    <tabbar></tabbar>
  </div>
</template>

<script>
  import Mock from 'mockjs';
  import $ from 'jquery'
import tabbar from "./components/subcomponents/TabBar"
export default {
  data() {
    return {
      'debug':0,
    };
  },
  computed:{
    myid(){
      return  Mock.mock('@id');
    },
  },
  created() {},
  methods: {
    te(){
      alert("it works!");
    },
    show_debug(){
      if(this.debug==0){
        $('.debug').css('display','inline');
        $('#bug').attr('value','关闭调试');

        this.debug=1;
      }else{
        $('.debug').css('display','none');
        $('#bug').attr('value','打开调试');
        this.debug=0;
      }

    },

  },
  watch: {},
  components:{
    tabbar,

  }
};
</script>



<style>
html,body{
    width: 100%;
    height: 100%;
}
.app-container {
  padding-bottom: 50px;
  overflow-x: hidden;
  overflow-y: scroll;
  height: 100%;
}

.debug{
  display: none;
}

</style>
